<template>
  <a-form>
    <a-row :gutter="24">
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="编号">
          <a-input v-model="queryParam.Code" allowClear />
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="姓名">
          <a-input v-model="queryParam.name" allowClear />
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="身份证">
          <a-input v-model="queryParam.iDNumber" allowClear />
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="性别">
          <a-select showSearch optionFilterProp="children" :filterOption="filterOption" v-model="queryParam.sex" allowClear>
            <a-select-option :value="1">男</a-select-option>
            <a-select-option :value="0">女</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <collapse-transition>
        <div v-show="!more">
          <a-col :lg="6" :md="12" :sm="24">
            <a-form-item v-bind="formItemLayout" label="咨询时间">
              <a-range-picker
                :ranges="{
                  今天: [moment(), moment()],
                  一周内: [moment(), moment().endOf('week')],
                  一月内: [moment(), moment().endOf('month')],
                  一年内: [moment(), moment().endOf('year')]
                }"
                style="width: 100%"
                @change="onChangeDate"
              />
            </a-form-item>
          </a-col>
          <a-col :lg="6" :md="12" :sm="24" v-if="area == 'basic'">
            <a-form-item v-bind="formItemLayout" label="出生年">
              <a-date-picker format="YYYY" mode="year" :value="queryParam.birthdayYear" :open="open" @openChange="openChange" @panelChange="panelChange" style="width: 100%;" />
            </a-form-item>
          </a-col>
          <a-col :lg="6" :md="12" :sm="24" v-if="area == 'basic'">
            <a-form-item v-bind="formItemLayout" label="籍贯">
              <a-cascader :options="options_nativePlace" placeholder="请选择地址..." :load-data="loadDataNativePlace" change-on-select v-model="NativePlaceValue" />
            </a-form-item>
          </a-col>
          <a-col :lg="6" :md="12" :sm="24" v-if="area == 'basic'">
            <a-form-item v-bind="formItemLayout" label="通讯地址">
              <a-cascader :options="options_address" :load-data="loadDataAddress" placeholder="请选择地址..." change-on-select v-model="AddressValue" />
            </a-form-item>
          </a-col>
          <a-col :lg="6" :md="12" :sm="24" v-if="area == 'basic'">
            <a-form-item v-bind="formItemLayout" label="是否足月">
              <a-select style="width:100%" allowClear showSearch optionFilterProp="children" :filterOption="filterOption" v-model="queryParam.isFullTerm">
                <a-select-option v-for="(item, index) in ZuyueDrop" :key="item.ID" :value="item.ID">
                  {{ item.Title }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :lg="6" :md="12" :sm="24" v-if="area == 'basic'">
            <a-form-item v-bind="formItemLayout" label="胎次">
              <a-select style="width:100%" allowClear showSearch optionFilterProp="children" :filterOption="filterOption" v-model="queryParam.parity">
                <a-select-option v-for="(item, index) in TaiciDrop" :key="item.ID" :value="item.ID">
                  {{ item.Title }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :lg="6" :md="12" :sm="24" v-if="area == 'basic'">
            <a-form-item v-bind="formItemLayout" label="分娩方式">
              <a-select style="width:100%" allowClear showSearch optionFilterProp="children" :filterOption="filterOption" v-model="queryParam.childbirthMode">
                <a-select-option v-for="(item, index) in FenmianDrop" :key="item.ID" :value="item.ID">
                  {{ item.Title }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :lg="6" :md="12" :sm="24" v-if="area == 'basic'">
            <a-form-item v-bind="formItemLayout" label="是否癫痫">
              <a-select style="width:100%" allowClear showSearch optionFilterProp="children" :filterOption="filterOption" v-model="queryParam.isEpilepsy">
                <a-select-option v-for="(item, index) in SFDXDrop" :key="item.ID" :value="item.ID">
                  {{ item.Title }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :lg="6" :md="12" :sm="24" v-if="area == 'basic'">
            <a-form-item v-bind="formItemLayout" label="重大疾病史">
              <a-input v-model="queryParam.majorDiseasesHistory" />
            </a-form-item>
          </a-col>
          <a-col :lg="6" :md="12" :sm="24" v-if="area == 'guardian'">
            <a-form-item v-bind="formItemLayout" label="监护人姓名">
              <a-input v-model="queryParam.guardianName" allowClear />
            </a-form-item>
          </a-col>
          <a-col :lg="6" :md="12" :sm="24" v-if="area == 'guardian'">
            <a-form-item v-bind="formItemLayout" label="联系方式">
              <a-input v-model="queryParam.tel" allowClear />
            </a-form-item>
          </a-col>
          <a-col :lg="6" :md="12" :sm="24" v-if="area == 'diagnostic'">
            <a-form-item v-bind="formItemLayout" label="诊断类别">
              <treeselect :disable-branch-nodes="true" :show-count="true" :options="ZDDrop" v-model="queryParam.diagnosisType" :placeholder="'请选择...'" :normalizer="normalizer" />
            </a-form-item>
          </a-col>
          <a-col :lg="6" :md="12" :sm="24" v-if="area == 'diagnostic'">
            <a-form-item v-bind="formItemLayout" label="诊断医院">
              <a-input v-model="queryParam.diagnosisHospital" allowClear />
            </a-form-item>
          </a-col>
          <a-col :lg="6" :md="12" :sm="24" v-if="area == 'declaresubsidy'">
            <a-form-item v-bind="formItemLayout" label="上课类型">
              <a-select style="width:100%" allowClear showSearch optionFilterProp="children" :filterOption="filterOption" v-model="queryParam.classType">
                <a-select-option v-for="(item, index) in SKDrop" :key="item.ID" :value="item.ID">
                  {{ item.Title }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :lg="6" :md="12" :sm="24" v-if="area == 'declaresubsidy'">
            <a-form-item v-bind="formItemLayout" label="申报补助片区">
              <a-cascader :options="options_declaresubsidy" :load-data="loadDataDeclaresubsidy" placeholder="请选择地址..." change-on-select v-model="AddressDeclaresubsidy" />
            </a-form-item>
          </a-col>
          <a-col :lg="6" :md="12" :sm="24" v-if="area == 'otherSchool'">
            <a-form-item v-bind="formItemLayout" label="其它学校名称">
              <a-input v-model="queryParam.otherSchoolName" allowClear />
            </a-form-item>
          </a-col>
          <a-col :lg="6" :md="12" :sm="24" v-if="area == 'transition'">
            <a-form-item v-bind="formItemLayout" label="离校年">
              <a-input-number v-model="queryParam.leavingSchoolYear" allowClear style="width:100%" />
            </a-form-item>
          </a-col>
          <a-col :lg="6" :md="12" :sm="24" v-if="area == 'transition'">
            <a-form-item v-bind="formItemLayout" label="离校月">
              <a-input-number v-model="queryParam.leavingSchoolMonth" allowClear style="width:100%" />
            </a-form-item>
          </a-col>
          <a-col :lg="6" :md="12" :sm="24" v-if="area == 'transition'">
            <a-form-item v-bind="formItemLayout" label="转衔方向性质">
              <a-select style="width:100%" allowClear showSearch optionFilterProp="children" :filterOption="filterOption" v-model="queryParam.changingDirection">
                <a-select-option v-for="(item, index) in XZDrop" :key="item.ID" :value="item.ID">
                  {{ item.Title }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :lg="6" :md="12" :sm="24" v-if="area == 'transition'">
            <a-form-item v-bind="formItemLayout" label="单位名称">
              <a-input v-model="queryParam.companyName" allowClear />
            </a-form-item>
          </a-col>
        </div>
      </collapse-transition>
    </a-row>
    <a-row :gutter="24">
      <a-col :lg="24" :md="24" :sm="24">
        <a-form-item :style="{ float: 'right' }">
          <!-- <a @click="toggle">
            {{ more ? '展开' : '收起' }}
            <a-icon :type="more ? 'caret-down' : 'caret-up'" />
          </a> -->
          <a-button type="primary" style="margin-left: 14px;" @click="onSearch(queryParam)">查询</a-button>
          <a-button v-if="displayf != 'choose'" @click="add" style="margin-left: 14px;">添加</a-button>
          <!-- <a-button v-if="displayf != 'choose'" style="margin-left: 14px;" @click="importExcel(queryParam)">导入</a-button> -->
          <a-button v-if="displayf != 'choose' && area == 'basic'" style="margin-left: 14px;" @click="exportExcel(queryParam)">导出</a-button>
          <a-popconfirm placement="left" v-if="displayf != 'choose' && isAdmin()" title="确定删除?" okText="确定" cancelText="取消" @confirm="deleted">
            <a-button type="danger" style="margin-left: 14px;">删除</a-button>
          </a-popconfirm>
          <a-button v-if="displayf == 'choose'" style="margin-left: 14px;" @click="enSure()">确定</a-button>
        </a-form-item>
      </a-col>
    </a-row>
  </a-form>
</template>

<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import '@/views/treeselect1.css'
import { dropList } from '@/api/drop'
import { getDictByCode } from '@/api/dict'
import dropValue from '@/views/dropValue'
import { areaList } from '@/api/area'
import CollapseTransition from '@/views/transition'
import moment from 'moment'
import { deleteChildrenIfNull2 } from '@/utils/util'
import { authDevice } from '@/utils/mixin'
const exampleExls = process.env.VUE_APP_API_BASE_URL + '/Excel/模版/清二股份经济合作社股东导入模板.xlsx'
export default {
  name: 'SearchFom',
  mixins: [authDevice],
  components: { moment, CollapseTransition, Treeselect },
  props: {
    area: {
      type: String,
      required: false
    },
    displayf: {
      type: String,
      required: false
    }
  },
  data() {
    return {
      a: process.env.VUE_APP_API_BASE_URL + '/api/students/ImportExcel',
      normalizer(node) {
        return {
          id: node.ID,
          label: node.Title,
          children: node.Childrens
        }
      },
      fileList: [],
      exampleExls,
      more: false,
      open: false,
      NativePlaceValue: [],
      AddressValue: [],
      AddressDeclaresubsidy: [],
      options_address: [],
      options_nativePlace: [],
      options_declaresubsidy: [],
      queryParam: {
        code: null,
        name: null,
        iDNumber: null,
        sex: null,
        birthdayYear: null,
        consultationTimeStart: null,
        consultationTimeEnd: null,
        guardianName: null,
        tel: null,
        diagnosisType: null,
        diagnosisHospital: null,
        isFullTerm: null,
        parity: null,
        childbirthMode: null,
        isEpilepsy: null,
        majorDiseasesHistory: null,
        classType: null,
        otherSchoolName: null,
        leavingSchoolYear: null,
        leavingSchoolMonth: null,
        changingDirection: null,
        companyName: null
      },
      belongBank: [],
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 18 }
        }
      },
      formItemLayout1: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 10 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 14 }
        }
      },
      ZDDrop: [],
      ZuyueDrop: [],
      TaiciDrop: [],
      FenmianDrop: [],
      SFDXDrop: [],
      SKDrop: [],
      XZDrop: []
    }
  },
  watch: {},
  computed: {},
  methods: {
    moment,
    toggle() {
      this.more = !this.more
    },
    initAreaList() {
      areaList({ parentID: 0 }).then(res => {
        var _options = []
        res.data.map(a => {
          _options.push({
            value: a.id,
            label: a.areaName,
            isLeaf: false
          })
        })
        this.options_address = _options
        this.options_nativePlace = _options
        this.options_declaresubsidy = _options
      })
    },
    loadDataNativePlace(value) {
      var params
      const targetOption = value[value.length - 1]
      if (targetOption) {
        targetOption.loading = true
        params = value[value.length - 1].value
        areaList({ parentID: params }).then(res => {
          var _options = []
          res.data.map(a => {
            _options.push({
              value: a.id,
              label: a.areaName,
              isLeaf: a.depth < 2 ? false : true
            })
          })
          targetOption.children = _options
          targetOption.loading = false
          this.options_nativePlace = [...this.options_nativePlace]
        })
      }
    },
    loadDataAddress(value) {
      var params
      const targetOption = value[value.length - 1]
      if (targetOption) {
        targetOption.loading = true
        params = value[value.length - 1].value
        areaList({ parentID: params }).then(res => {
          var _options = []
          res.data.map(a => {
            _options.push({
              value: a.id,
              label: a.areaName,
              isLeaf: a.depth < 2 ? false : true
            })
          })
          targetOption.children = _options
          targetOption.loading = false
          this.options_address = [...this.options_address]
        })
      }
    },
    loadDataDeclaresubsidy(value) {
      var params
      const targetOption = value[value.length - 1]
      if (targetOption) {
        targetOption.loading = true
        params = value[value.length - 1].value
        areaList({ parentID: params }).then(res => {
          var _options = []
          res.data.map(a => {
            _options.push({
              value: a.id,
              label: a.areaName,
              isLeaf: a.depth < 2 ? false : true
            })
          })
          targetOption.children = _options
          targetOption.loading = false
          this.options_declaresubsidy = [...this.options_declaresubsidy]
        })
      }
    },
    openChange(status) {
      if (status) {
        this.open = true
      } else {
        this.open = false
      }
    },
    panelChange(value) {
      this.queryParam.birthdayYear = value
      this.open = false
    },
    clearData() {
      Object.assign(this.queryParam, {
        name: null,
        oldAddress: null,
        iDNumber: null
      })
    },
    add() {
      this.$emit('handleAdd')
    },
    deleted() {
      this.$emit('handleDel')
    },
    enSure() {
      this.$emit('handleEnSure')
    },
    onChangeDate(dates, dateStrings) {
      this.startDate = dateStrings[0]
      this.endDate = dateStrings[1]
      this.queryParam.consultationTimeStart = dateStrings[0]
      this.queryParam.consultationTimeEnd = dateStrings[1]
    },
    onSearch(data) {
      const objData = { ...data }
      objData.nativePlace_province = this.NativePlaceValue.length > 0 ? this.NativePlaceValue[0] : null
      objData.nativePlace_city = this.NativePlaceValue.length > 1 ? this.NativePlaceValue[1] : null
      objData.nativePlace_county = this.NativePlaceValue.length > 2 ? this.NativePlaceValue[2] : null
      objData.province = this.AddressValue.length > 0 ? this.AddressValue[0] : null
      objData.city = this.AddressValue.length > 1 ? this.AddressValue[1] : null
      objData.county = this.AddressValue.length > 2 ? this.AddressValue[2] : null
      objData.declareArea_province = this.AddressDeclaresubsidy.length > 0 ? this.AddressDeclaresubsidy[0] : null
      objData.declareArea_city = this.AddressDeclaresubsidy.length > 1 ? this.AddressDeclaresubsidy[1] : null
      objData.declareArea_county = this.AddressDeclaresubsidy.length > 2 ? this.AddressDeclaresubsidy[2] : null
      objData.birthdayYear = objData.birthdayYear != null ? objData.birthdayYear.year() : null
      this.$emit('search', objData)
    },
    exportExcel(data) {
      const objData = { ...data }
      objData.nativePlace_province = this.NativePlaceValue.length > 0 ? this.NativePlaceValue[0] : null
      objData.nativePlace_city = this.NativePlaceValue.length > 1 ? this.NativePlaceValue[1] : null
      objData.nativePlace_county = this.NativePlaceValue.length > 2 ? this.NativePlaceValue[2] : null
      objData.province = this.AddressValue.length > 0 ? this.AddressValue[0] : null
      objData.city = this.AddressValue.length > 1 ? this.AddressValue[1] : null
      objData.county = this.AddressValue.length > 2 ? this.AddressValue[2] : null
      objData.declareArea_province = this.AddressDeclaresubsidy.length > 0 ? this.AddressDeclaresubsidy[0] : null
      objData.declareArea_city = this.AddressDeclaresubsidy.length > 1 ? this.AddressDeclaresubsidy[1] : null
      objData.declareArea_county = this.AddressDeclaresubsidy.length > 2 ? this.AddressDeclaresubsidy[2] : null
      objData.birthdayYear = objData.birthdayYear != null ? objData.birthdayYear.year() : null
      this.$emit('exportXls', objData)
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    download() {
      window.open(this.exampleExls)
    },
    beforeUpload(file) {
      this.a = process.env.VUE_APP_API_BASE_URL + '/api/students/ImportExcel'
      const isJpgOrPng = file.type === 'application/vnd.ms-excel' || file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
      if (!isJpgOrPng) {
        this.$message.error('您只能上传Excel文件!')
      }
    },
    handleChange(info) {
      const file = info.file
      const isJpgOrPng = file.type === 'application/vnd.ms-excel' || file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
      if (isJpgOrPng) {
        let fileList = [...info.fileList]
        this.fileList = fileList
        // if (file.response) {
        //   if (info.file.status === 'done') {
        //     this.$message.info(file.response)
        //     this.fileList = []
        //   }
        // }
        if (info.file.status === 'done') {
          if (file.response) {
            this.$message.info(file.response)
            this.fileList = []
          }
        }
      }
    },
    removeChildrenIfNUll(data) {
      data.map(a => {
        if (a && a.Childrens && a.Childrens.length > 0) {
          this.removeChildrenIfNUll(a.Childrens)
        } else {
          deleteChildrenIfNull2(a)
        }
      })
    }
  },
  created() {
    dropList({ categoryID: dropValue.ZD }).then(res => {
      this.ZDDrop = res.filter(a => a.ID != -1)
      this.removeChildrenIfNUll(this.ZDDrop)
    })
    dropList({ categoryId: dropValue.zuyue }).then(res => {
      this.ZuyueDrop = res
    })
    dropList({ categoryId: dropValue.taici }).then(res => {
      this.TaiciDrop = res
    })
    dropList({ categoryId: dropValue.fenmian }).then(res => {
      this.FenmianDrop = res
    })
    getDictByCode({ categoryCode: dropValue.SFDX }).then(res => {
      this.SFDXDrop = res
    })
    getDictByCode({ categoryCode: dropValue.ClassType }).then(res => {
      this.SKDrop = res
    })
    dropList({ categoryId: dropValue.DWXZ }).then(res => {
      this.XZDrop = res
    })
    this.initAreaList()
  },
  mounted() {}
}
</script>
<style lang="less" scoped>
.ant-form-item {
  margin-bottom: 0;
}
</style>
